<script lang="ts" setup>
import { useLocale } from '@/locale/locale';

const { t } = useLocale();
</script>

<template>
  <view class="flex items-center">
    <image class="order-details__status-icon" src="/static/order_details_check_out.png"></image>
    <view class="flex-1 ml-2">
      <view class="order-details__status-title">
        {{ t('LOKey_orderCancel') }}
      </view>
      <view class="order-details__status-tips">
        {{ t('LOKey_orderCancelNotice') }}
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.order-details__status-icon {
  height: 72rpx;
  width: 72rpx;
}

.order-details__status-title {
  color: #fff;
  font-size: 36rpx;
  line-height: 50rpx;
}

.order-details__status-tips {
  color: #fff;
  font-size: 24rpx;
  line-height: 34rpx;
}
</style>
